<template>
    <div class="tree_boxs">
        <div class="tree_left">
            <div v-for="(item,index) in menuList" :key="index" class="tree_left_btn" :class="selse==item.id?'tree_left_btn_active':''" @click="selseTab(item.id)">
                <div class="tree_left_btn_icon" :class="selse==item.id?'tree_left_btn_icon_active':''"></div>
                <div class="tree_left_btn_title">
                    {{ item.h5text }}  
                    <span class="tree_left_btn_badge" v-if="item.badge&&badgeObjs[item.badge]&&item.badge!='schootstatus'">
                        {{badgeObjs[item.badge]>99?'99+':badgeObjs[item.badge]}} 
                    </span>
                    <span class="tree_left_btn_badge2" v-if="item.badge&&badgeObjs[item.badge]&&item.badge=='schootstatus'">
                        {{badgeObjs[item.badge]>99?'99+':badgeObjs[item.badge]}}
                    </span>

                </div>
            </div>
        </div>
        <div class="tree_right" ref="scrollContainer" >
            <div><slot name="solt1"></slot>  </div>
            <div class="tree_right_btn" @scroll="handleScroll" >
                <slot name="solt2"></slot>
                <!-- 加载提示 -->
                <!-- <div v-if="isLoading||isEnd" class="loading-text">全部数据{{total  }}条</div> -->

                <div v-if="isLoading&&total&&length" class="loading-text"> {{length}}/{{ total }}  加载中...</div>
                <div v-if="isEnd&&total&&length" class="loading-text">{{length}}/{{ total }}  加载完毕</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: { 
        loshow:{
            typeof:Boolean,
            default:function(){return false}
        },
        badgeObjs: {
            typeof: Object,
            default: function() {
                return {};
            }
        },
        selse: {
            typeof: String | Number,
            default: ''
        },
        menuList: {
            typeof: Array,
            default() {
                return [];
            }
        }
    }, 
    data() {
        return { 
            isEnd: false, // 是否已经加载完所有数据
            total: 0, // 总数据条数 
            length: 0,//当前条数
            lettable: [
                { title: '班级信息', id: '1' },
                { title: '待核校', id: '2' },
                { title: '问题校', id: '3' },
                { title: '已驳回', id: '4' }
            ],
            isLoading: false, // 是否正在加载 
            lastScrollTime: 0 // 上次触发滚动的时间
        };
    },
    methods: {
        selseTab(id) {
            this.$emit('selseTab', id);
        },
        // 节流函数
        throttle(func, delay) {
            return (...args) => {
                const now = Date.now();
                if (now - this.lastScrollTime >= delay) {
                    func.apply(this, args);
                    this.lastScrollTime = now;
                }
            };
        },
        // 处理滚动事件
       // 处理滚动事件
    handleScroll() {
        this.throttle(this.checkScrollBottom, 6000)();
    },
    // 检查是否滚动到底部
    checkScrollBottom() {
        const container = this.$refs.scrollContainer;
        if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
            // 检查是否还有更多数据需要加载
            if (this.length < this.total) {
                this.isEnd = false;

                this.loadData();
            } else {
                this.isEnd = true;
            }
        }
    },
        // 模拟加载数据
        loadData() {
            if (this.isEnd || this.isLoading) return; 
            this.isLoading = true; 
            this.$emit('handleScroll')
            setTimeout(() => {
                // 模拟加载数据
                this.isLoading = false;
                // 这里可以替换为真实的 API 请求
            }, 6000);
        }
    }
};
</script>

<style scoped lang="scss">
.tree_boxs {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    .tree_left {
        width: 85px !important;
        min-width: 85px;
        background: #F6F6F6;
        font-size: 13px;
        .tree_left_btn {
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
        }
        .tree_left_btn_icon {
            width: 4px;
            height: 15px;
            border-radius: 15px;
            margin-left: 3px;
        }
        .tree_left_btn_icon_active {
            background-color: #22BF57;
        }
        .tree_left_btn_title {
            width: 100%;
            text-align: center;
        }
    }
    .tree_right {
        flex: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: calc(100% - 85px);
        overflow: hidden;
        .tree_right_btn {
            height: 100%;
            overflow-y: auto;
        }
    }
} 
.tree_left_btn_active {
    background-color: #fff;
}
.tree_left_btn_badge {
    color: #DD4242;
    font-size: 11px;
}
.tree_left_btn_badge2{
    color: #11bd1c;
    font-size: 11px;

}
.loading-text {
    text-align: center;
    padding: 10px;
    font-size: 12px;
    color: #888;
}
</style>